<template>
	<view class="user-bc">
		<view class="user-box">
			<view class="user-header">
				<uv-avatar :src="api.FileById+user.avatar" size="128rpx"></uv-avatar>
				<view class="header-right">
					<p class="header-right-name">{{user.nickName}}</p>
				</view>
				<view class="header-right-more" @click="moreShow">
					<uv-icon size="48rpx" name="more-dot-fill"></uv-icon>
				</view>
			</view>
			<!-- 统计 -->
			<view class="user-statistics">
				<!-- <view class="statis-item">
					<view class="statis-item-number">111</view>
					<view class="statis-item-text">&nbsp;获赞</view>
				</view> -->
				<view class="statis-item">
					<view class="statis-item-number">{{fols.length}}</view>
					<view class="statis-item-text">&nbsp;关注</view>
				</view>
				<view class="statis-item">
					<view class="statis-item-number">{{fans.length}}</view>
					<view class="statis-item-text">&nbsp;粉丝</view>
				</view>
			</view>
			<!-- 简介 -->
			<view class="user-description">
				{{user.description?user.description:'目前没有简介'}}
			</view>
			<!-- 性别 -->
			<!-- 关注 -->
			<view class="user-follow">
				<!-- 关注按钮 -->
				 <uv-button v-if="!userStore.followers.includes(userId)" color="#ff2e56" :customStyle="{height:'60rpx'}" text="+ 关注" @click="follow"></uv-button> 
				<!-- 已关注情况 -->
				<view class="no-follow" v-else>
					<view class="no-left">
						<uv-button color="#4b4b4b" :customStyle="{height:'60rpx'}" text="已关注" @click="unFollow"></uv-button>
					</view>
					<view class="no-left">
						<uv-button color="#4b4b4b" :customStyle="{height:'60rpx'}" text="私信" @click="addConversation"></uv-button>
					</view>
					
				</view>
			</view>
			<uv-line></uv-line>
			<uv-tabs lineColor="#282828" lineWidth="180rpx" :itemStyle="{'width':'180rpx','height':'80rpx'}"
				:list="tabs" @click="tabChange"></uv-tabs>
				<!-- 作品列表 -->
			<view class="photograph-content" v-if="tabIndex == 0">
				<view class="content-item" v-for="item in photographs" @click="toPhotograph(item.id)">
					<uv-image :src="api.FileById+item.fileShowId" width="216rpx" height="216rpx"></uv-image>
					<view class="item-name">
						<uv-icon color="#fff"  name="heart" size="36rpx"></uv-icon>
						{{item.likeCount>1000?(item.likeCount/1000).toFixed(1)+'k':item.likeCount}}
					</view>
				</view>
			</view>
			<!-- 收藏列表 -->
			<view class="star-content" v-else-if="tabIndex == 1">
				<view  class="star-empty" v-if="!stars">
					收藏夹内容为空
				</view>
				<view class="star-item" v-for="item in stars" @click="toPhotograph(item.id)">
					<view class="item-header">
						<view class="header-name">
							{{item.name}}
						</view>
						<view class="header-statistics">
							{{item.children.length}}个作品·<view class="flex" v-if="item.isPublicly">公开<uv-icon
									name="lock-opened-fill"></uv-icon></view>
							<view class="flex" v-else>私密<uv-icon name="lock-fill"></uv-icon></view>
						</view>
					</view>
					<view class="item-content">
						<view class="" v-for="photo in item.children">
							<uv-image  width="168rpx" mode="aspectFill" height="168rpx"  :src="api.FileById+photo.photographFileShowId"></uv-image>
						</view>
						<view class="content-default" v-for="photo in (4-item.children.length <=0?0:4-item.children.length)">
							
						</view>
					</view>
				</view>
			</view>
			<!-- 点赞列表 -->
			<view class="photograph-content" v-if="tabIndex == 2">
				<view class="content-item" v-for="item in likes" @click="toPhotograph(item.photographId)">
					<uv-image :src="api.FileById+item.photographFileShowId" width="216rpx" height="216rpx"></uv-image>
					<view class="item-name">
						{{item.photographName}}
					</view>
				</view>
			</view>
		</view>
		
		<uv-popup ref="morePopup" mode="bottom" round="10" @change="change">
					<view class="user-popup">
						<view class="popup-item">
							<view class="item-icon">
								<uv-icon size="64rpx" color="#4e515a" name="share-fill"></uv-icon>
							</view>
							<view class="item-title">
								分享名片
							</view>
						</view>
						<view class="popup-item" @click="addConversation">
							<view class="item-icon">
								<uv-icon size="64rpx" color="#4e515a" name="chat-fill"></uv-icon>
							</view>
							<view class="item-title">
								发私信
							</view>
							
						</view>
						<view class="popup-item">
							<view class="item-icon">
								<uv-icon size="64rpx" color="#4e515a" name="warning-fill"></uv-icon>
							</view>
							<view class="item-title">
								举报
							</view>
							
						</view>
						<view class="popup-item">
							<view class="item-icon">
								<uv-icon size="64rpx" color="#4e515a" name="close-circle-fill"></uv-icon>
							</view>
							<view class="item-title">
								拉黑
							</view>
							
						</view>
					</view>
				</uv-popup>
	</view>
</template>

<script setup>
	import api from './api';
	import {ref,onMounted} from 'vue'
	import { useUserStore } from '../../stores/user';
	const userStore = useUserStore()
	const userId = ref('')
	onMounted(()=>{
		let pages = getCurrentPages()
		userId.value = pages[pages.length - 1].options.id
		getUserById()
		getPhotographByUserId()
		getFans(userId.value)
		getFols(userId.value)
	})
	
	//获取用户信息
	const user = ref({avatar:'051822f6-be6e-4b56-91ae-73e030369c97'})
	const getUserById = ()=>{
		api.getUserById(userId.value).then(res=>{
			user.value = res.data
			console.log(user.value.avatar)
			console.log(user.value);
		})
	}
	//显示底部抽屉
	const morePopup = ref()
	const moreShow = ()=>{
		morePopup.value.open()
	}
	//标签卡
	const tabs = [{
		name: '作品'
	}, {
		name: '收藏'
	}, {
		name: '喜欢'
	}]
	const tabIndex =  ref(0)
	const tabChange = (e) => {
		tabIndex.value = e.index
		if (e.index == 0) {
			if(photographs.value.length == 0){
				getPhotographByUserId()
			}
		} else if (e.index == 2) {
			 if(likes.value.length ==0){
				 getLikesByUserId()
			 }
		} else {
			if(likes.value.length == 0){
				getStarsByUserId()
			}
		}
	}
	
	//获取用户作品
	const photographs = ref([])
	const getPhotographByUserId = ()=>{
		api.getPhotographByUserId(userId.value).then(res=>{
			photographs.value = res.datas
		})
	}
	//获取用户收藏夹
	const stars = ref([])
	const getStarsByUserId = ()=>{
		api.getStarByUserId(userId.value).then(res=>{
			stars.value = res.datas
		})
	}
	
const unFollow = ()=>{
		api.unFollow(userId.value).then(res=>{
			fans.value = fans.value.filter(x=>x.name != 'new')
			userStore.unFollow(userId.value)
		})
	}

	const follow = () => {
		api.follow(userId.value).then(res=>{
			fans.value.push({name:'new'})
			console.log(res);
			userStore.addFollow(userId.value)
		})
	}
	
	
	//用户点赞
	const likes = ref([])
	const getLikesByUserId = ()=>{
		api.getLikesByUserId(userId.value).then(res=>{
			likes.value = res.datas
		})
	}
	const toPhotograph = (id)=>{
		uni.navigateTo({
			url: './starItem?id=' + id
		})
	}
	
	const addConversation = ()=>{
		api.addConversation({receiverId:user.value.id}).then(res=>{
			if(res.successed){
				uni.navigateTo({
					url:'/pages/message/message?id='+res.message
				})
			}
		})
	}
	
	const fans = ref()
	const fols =ref()
	const getFans = (id)=>{
		api.getFans(id).then(res=>{
			fans.value = res.datas
		})
	}
	const getFols = (id)=>{
		api.getFollows(id).then(res=>{
			fols.value = res.datas
		})
	}
	
	
	
</script>

<style lang="scss">
	.user-bc{
		width: 100vw;
		background-color: #282828;
		.user-box{
			background-color: white;
			height: 280rpx;
			border-top-right-radius: 60rpx;
			border-top-left-radius: 60rpx;
			padding: 32rpx;
			.user-header {
				display: flex;
				justify-content: left;
			
				.header-right {
					padding-left: 40rpx;
					
					.header-right-name {
						font-weight: bold;
						font-size: 36rpx;
						height: 128rpx;
						line-height:  128rpx;
					}
				}
				.header-right-more{
					position: absolute;
					    right: 100rpx;
					    top: 80rpx;
				}
			}
			.user-statistics {
				display: flex;
				justify-content: left;
				height: 42rpx;
				line-height: 42rpx;
				padding: 10rpx 0 20rpx 0;
			
				.statis-item {
					display: flex;
					justify-content: left;
					margin-right: 20rpx;
			
					.statis-item-text {
						font-size: 24rpx;
						color: #333;
					}
			
					.statis-item-number {
						font-weight: bold;
						color: #2c2c2c;
					}
				}
			}
			.user-description{
				font-size: 28rpx;
				    padding-right: 120rpx;
					padding-bottom: 20rpx;
			}
			.user-follow{
				width: 80%;
				margin: 20rpx auto;
				.no-follow{
					display: flex;
					justify-content: space-between;
					width: 100%;
					.no-left{
						width: 45%;
					}
				}
			}
		}
		.user-popup{
			padding: 30rpx;
			    display: flex;
			    justify-content: space-between;
			    height: 160rpx;
			    background: #f3f3f3;
				.popup-item{
					background-color: white;
					width: 160rpx;
					height: 160rpx;
					position: relative;
					border-radius: 20rpx;
					.item-icon{
						width: 64rpx;
						position: absolute;
						    top: 30rpx;
						    left: 48rpx;
					}
					.item-title{
						font-size: 14px;
						    text-align: center;
						    line-height: 220rpx;
						    color: #52555a;
					}
				}
		}
		.photograph-content {
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;
		    margin-top: 20rpx;
			.content-item {
				position: relative;
		
				.item-name {
					position: absolute;
					top: 170rpx;
					padding-left: 20rpx;
					font-size: 26rpx;
					color: white;
					height: 36rpx;
					line-height: 36rpx;
					display: flex;
				}
			}
		}
		
		
		.star-content{
			position: relative;
			.star-item {
				background: #f3f3f3;
				margin-top: 20rpx;
					
				.item-header {
					padding: 20rpx;
					
					.header-name {
						font-size: 30rpx;
					}
					
					.header-statistics {
						display: flex;
						justify-content: left;
						font-size: 14px;
						color: #666;
					
						.flex {
							display: flex;
						}
					}
				}
				.item-content{
					display: flex;
					justify-content: left;
					gap:4rpx;
					.content-default{
						width: 168rpx;
						height: 168rpx;
						background-color: #ddd;
					}
				}
			}
			.star-empty{
				    position: absolute;
				    top: 420rpx;
				    text-align: center;
				    color: #999;
				    font-size: 28rpx;
				    width: 100%;
			}
		}
	}
</style>